<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Echarts</title>
    <!-- 引入 echarts.js -->
    <script src="source/echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 800px;height:600px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ios和android占有率'
            },
            legend: {                                   // 图例配置
                padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
                itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                data: ['ios', 'android']
            },
            tooltip: {                                  // 提示框配置
                trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: [                                    // 直角坐标系中横轴数组
                {
                    type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
            ],
            yAxis: [                                    // 直角坐标系中纵轴数组
                {
                    type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
                    splitNumber: 11                      // 数值轴用，分割段数，默认为5
                }
            ],
            series: [
                {
                    name: 'ios',                        // 系列名称
                    type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
                },
                {
                    name: 'android',                    // 系列名称
                    type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>